<script>
import Footer from './Footer.vue'
import Logo from './Logo.vue'


export default {
    components : {
        Footer,
        Logo
    },
    methods:{
      routeRegist(){
        this.$router.push("/regist");
        return;
      },
      routeLogin(){
        this.$router.push("/login");
        return;
      }
    }
}


</script>

<template>
    <header>
        <div class="header-container">
            <div class="header-element">
                <span>欢迎来到Colorful</span>
                <span><a href="#" class="login-link" @click.prevent="routeLogin">请登录</a></span>
                <span><a href="#" class="regist-link" @click.prevent="routeRegist">免费注册</a></span>
                <span>手机验证码登录</span>
            </div>
            <div class="header-element">
                <span>我的Colorful</span>
                <span>会员俱乐部</span>
                <span>手机Colorful</span>
                <span>帮助中心</span>
                <span>品牌合作</span>
            </div>
        </div>
    </header>
    <div class="body-container">
        <div class="search-line">
            <Logo/>
            <div class="search-container">
                <div class="suggestion-wrapper">
                    <input class="search-input" type="text"/>
                    <div class="search-suggestion"></div>
                </div>
                <span class="search-button">搜索</span>
                <div class="shopping-bag">
                    <span>购物袋0件</span>
                </div>
            </div>
        </div>
        <div class="product-container">

        </div>
    </div>
    <Footer/>
</template>

<style scoped>

.regist-link,.login-link{
    color: white;
}

.regist-link:hover,.login-link:hover{
    color: red;
}

.product-container{
    height: 1000px;
}

.suggestion-wrapper{
    width: 60%;
    position: relative;
}

.search-suggestion{
    position: absolute;
    border: solid black 1px;
    width: 100%;
}

.shopping-bag{
    border: solid #c8c8c8 1px;
    line-height: 40px;
    padding: 0 20px;
    margin: 0 50px;
}

.search-input{
    display: inline-block;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
}

header{
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
}

.header-container{
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.body-container{
    width: 100%;
    display: flex;
    justify-content: center;
}

.search-line{
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 100px;
}

.search-container{
    display: flex;
    width: 80%;
    justify-content: center;
    align-items: center;
}

.header-element > span {
    font-size: 12px;
    font-family: arial;
    line-height: 30px;
    margin-left: 18px;
}


.search-button{
    display: inline-block;
    height: 40px;
    width: 10%;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    background-color: black;
    color: white;
}

footer{
    background-color: black;
    color: #c8c8c8;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

</style>
